import React from "react";
import logo from "@/styles/imgs/logo.png"
import './index.scss';
import { Icon, Popover } from 'antd';
import { getData } from "@/api/commonApi";
import { withRouter } from 'react-router-dom';
class I7bHeader extends React.Component<any, any>{
    constructor(props: any) {
        super(props);

        this.state = {
            navData: [],
            navMenu: null,
            sss: true,
        }
    }

    componentDidMount() {
        this.getNavData();
    }

    async getNavData() {
        let res: any = await getData('navData');
        if (!res) {
            return false;
        }
        this.setState({
            navData: res.data
        })
    }

    // 路由跳转
    goPath(item: any) {
        let history = this.props.history;
        let url = item.url;
        if (url[0] === "/") {
            url = item.code ? url + '/' + item.code : url;
            if (url === history.location.pathname) {
                return;
            }
            history.push({ pathname: url });
        } else {
            console.log(`外链`)
        }
    }

    render() {
        return (
            <div className="i-h h100">
                <div className="i-h-logo">
                    <img src={logo + 's'} alt="logo" />
                </div>
                <div className="i-h-user">
                    <span onClick={this.goPath.bind(this, { url: '/login', code: "login" })}><Icon type="user" /> 登陆</span>
                    <span onClick={this.goPath.bind(this, { url: '/login', code: "register" })}><Icon type="edit" /> 注册</span>
                </div>
                <div className="i-h-nav">
                    <ul>
                        {this.state.navData.map((item: any, inx: number) => {
                            if (item.subNav && item.subNav.length > 0) {
                                return (
                                    <li key={inx}>
                                        <Popover content={this.getPopContent(item)} trigger="hover">
                                            <span>{item.navName}</span>
                                        </Popover>
                                    </li>
                                )
                            } else {
                                return (
                                    <li key={inx} onClick={this.goPath.bind(this, item)}>
                                        <span>{item.navName}</span>
                                    </li>
                                )
                            }
                        })}
                    </ul>
                </div>
            </div>
        )
    }

    // 获取弹框HTML
    getPopContent(data: any) {
        return (
            <div>
                {data.subNav.map((el: any, inx: any) => {
                    if (!el.subNav) {
                        return (
                            <p className="conent-p" key={inx} onClick={this.goPath.bind(this, el)}>{el.navName}</p>
                        )
                    } else {
                        return (
                            [
                                <div className="conent-item-div" key={inx}>
                                    <div className="c-i-d-top">
                                        <div className="c-i-d-title mb-10">
                                            <span><Icon type={el.icon} className="mr-5" />{el.navName}</span>
                                        </div>
                                        {el.subNav.map((subEl: any, subInx: number) => {
                                            return (
                                                <p className="c-i-d-item" key={subInx} onClick={this.goPath.bind(this, subEl)}>
                                                    {subEl.navName}
                                                    <span className={`${subEl.img}`}></span>
                                                </p>
                                            )
                                        })}
                                    </div>
                                </div>,
                                <br key={inx + "" + inx} className={`hh-br ${(inx + 1) / 3 === 1 ? 'show' : 'false'}`} />
                            ]
                        )
                    }
                })}
            </div>
        )
    }
}

export default withRouter(I7bHeader);